<script setup lang="ts">
import { reactive, createVNode, onMounted } from 'vue'
import { Modal, message } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { useChatStore } from '@/stores/chat'
import { useModelStore } from '@/stores/model'
import { useUserStore } from '@/stores/user'
import { formatBytes } from '@/utils/format'

// 外部参数
// const props = defineProps({
//   // 是否手机模式
//   isMobile: {
//     type: Boolean,
//     required: true,
//   },
// })

// 聊天存储
const chatStore = useChatStore()

// 模型存储
const modelStore = useModelStore()

// 用户存储
const userStore = useUserStore()

// 状态参数
const state = reactive({
  usage: 0,
  quota: 0,
})

const onClear = (type: 'convs' | 'models' | 'local') => {
  switch (type) {
    case 'convs':
      Modal.confirm({
        title: '删除所有对话',
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        content: '本操作会删除所有聊天记录，删除后不可恢复，继续吗？',
        onOk: async () => {
          await chatStore.clearConvs()
          message.success('聊天记录已清空')
        },
      })
      break
    case 'models':
      Modal.confirm({
        title: '删除所有模型',
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        content: '本操作会删除所有已添加的模型，删除后可在“模型提供商”中重新添加，继续吗？',
        onOk: async () => {
          await modelStore.clearModels()
          message.success('模型已清空')
        },
      })
      break
    case 'local':
      Modal.confirm({
        title: '重置数据',
        icon: createVNode(ExclamationCircleOutlined),
        maskClosable: true,
        content:
          '本操作会完全删除本地聊天记录、模型数据、已登录信息等本地数据。重置后您需要重新登录，继续吗?',
        onOk: async () => {
          try {
            await userStore.clearLocalStorage()
            message.success('重置数据成功')
            setTimeout(() => {
              location.reload()
            }, 1000)
          } catch (error) {
            window.console.error(error)
            message.error(error.message)
          }
        },
      })
      break
  }
}

// 关闭页面时调用
const onClose = () => {}

onMounted(async () => {
  try {
    // 查询存储的使用情况（IndexedDB 通常属于可用存储）
    const { usage, quota } = await navigator.storage.estimate()

    state.usage = usage
    state.quota = quota
  } catch (error) {
    window.console.error('查询存储使用情况失败：', error)
  }
})

defineExpose({
  onClose,
})
</script>

<template>
  <div>
    <div v-if="state.quota" class="mb-3">
      <a-alert type="warning">
        <template #message>
          当前已使用存储空间：{{ formatBytes(state.usage) }}，总配额：{{ formatBytes(state.quota) }}
        </template>
      </a-alert>
    </div>
    <n-list bordered>
      <n-list-item>
        <n-thing description="删除所有对话"></n-thing>
        <template #suffix>
          <n-button type="error" size="small" @click="onClear('convs')">删除</n-button>
        </template>
      </n-list-item>
      <n-list-item>
        <n-thing description="删除所有模型"></n-thing>
        <template #suffix>
          <n-button type="error" size="small" @click="onClear('models')">删除</n-button>
        </template>
      </n-list-item>
      <n-list-item>
        <n-thing description="重置数据"></n-thing>
        <template #suffix>
          <n-button type="error" size="small" ghost @click="onClear('local')">重置</n-button>
        </template>
      </n-list-item>
    </n-list>
  </div>
</template>

<style lang="scss" scoped></style>
